<template>
  <section class="goods">
    <el-col :span="24" class="action-bar">
      <span class="task-form-text">店铺：</span>
      <el-select v-model="searchType" class="action-bar-input" placeholder="请选择">
        <el-option
          v-for="item in searchTypeOptions"
          :key="item.value"
          :label="item.value"
          :value="item.value">
        </el-option>
      </el-select>
			<el-button type="primary" size="medium">筛选</el-button>
			<el-button type="primary" size="medium" @click="editor">发布商品</el-button>
    </el-col>
    <!--列表-->
		<el-table :data="users" highlight-current-row class="el-table-style">
			<el-table-column type="selection" width="55" sortable/>
			<el-table-column type="index" width="60" sortable/>
			<el-table-column prop="name" label="商品图片" width="120" sortable/>
			<el-table-column prop="sex" label="商品名称" width="100" sortable/>
			<el-table-column prop="age" label="发布时间" width="100" sortable/>
			<el-table-column prop="birth" label="普通价" width="120" sortable/>
			<el-table-column prop="addr" label="会员价" width="180" sortable/>
      <el-table-column prop="addr" label="所属店铺" width="180" sortable/>
      <el-table-column prop="addr" label="总库存" width="180" sortable/>
      <el-table-column prop="addr" label="销量" width="180" sortable/>
      <el-table-column prop="addr" label="排序" width="180" sortable/>
			<el-table-column label="操作" width="250">
				<el-button type="primary" size="mini" @click="editor">编辑</el-button>
        <el-button type="danger" size="mini" >删除</el-button>
			</el-table-column>
		</el-table>
		<el-col :span="24" class="footer-bar">
			<div class="page-code"><el-pagination background layout="prev, pager, next" :total="50"></el-pagination></div>
    </el-col>

    <!-- 弹出的商品编辑窗口 -->
    <el-dialog
      :visible.sync="dialogVisible"
      >
      <el-form :label-position="'left'" label-width="80px" :model="member" >
        <el-form-item label="商品图片" >
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="imgPrevState" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-input v-model="member.name" ></el-input>
        </el-form-item>
        <el-form-item label="发布时间">
          <div class="block">
            <el-date-picker
            v-model="publicTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="普通价">
          <el-input v-model="member.s_price"></el-input>
        </el-form-item>
        <el-form-item label="会员价">
          <el-input v-model="member.vip_price"></el-input>
        </el-form-item>
        <el-form-item label="所属店铺">
          <el-select v-model="searchType" placeholder="请选择">
            <el-option
              v-for="item in searchTypeOptions"
              :key="item.value"
              :label="item.value"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="member.hasMoney"></el-input>
        </el-form-item>
          <!-- 规格列表 -->
         <vxe-table
          border
          resizable
          auto-resize
          show-overflow
          height="200"
          row-id="id"
          :data.sync="tableData"
          :edit-config="{trigger: 'click', mode: 'cell'}"
          @edit-actived="editActivedEvent"
          @edit-closed="editClosedEvent">
          <vxe-table-column type="index" width="60"></vxe-table-column>
          <vxe-table-column field="name" title="规格" :edit-render="{name: 'input'}"></vxe-table-column>
          <vxe-table-column field="sex" title="库存" :edit-render="{name: 'input'}"></vxe-table-column>
        </vxe-table>
        <!-- 规格列表 end-->
        <div class="add-table-wrapper">
          <el-button type="primary" @click="addTable" size="medium">添加</el-button>
        </div>
        
        <el-form-item label="商品详情">
          </el-form-item>
          <quill-editor 
					v-model="editorContent" 
					ref="myQuillEditor" 
					:options="editorOption" 
					@blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
					@change="onEditorChange($event)">
        </quill-editor>
        
        <div  class="add-table-wrapper">
            <el-button type="primary">发布</el-button>
          </div>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
export default {
  name:'goods',
	data(){
		return {
      editorContent: '',
      editorOption: {
				theme:'snow',
				modules:{
					toolbar:[
						['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
						['blockquote', 'code-block'],     //引用，代码块
						[{ 'header': 1 }, { 'header': 2 }],        // 标题，键值对的形式；1、2表示字体大小
						[{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
						[{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
						[{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
						[{ 'direction': 'rtl' }],             // 文本方向
						[{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
						[{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
						[{ 'color': [] }, { 'background': [] }],     // 字体颜色，字体背景颜色
						[{ 'font': [] }],     //字体
						[{ 'align': [] }],    //对齐方式
						['clean'],    //清除字体样式
						['image','video']    //上传图片、上传视频
					]
				},
			},
			users:[
				{name:'周杰伦',sex:'男',age:'18',birth:'1990-05-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'ff',sex:'男',age:'18',birth:'1994-04-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'ggg',sex:'男',age:'18',birth:'1993-03-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'gggg',sex:'男',age:'18',birth:'1992-02-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'},
				{name:'g223',sex:'男',age:'18',birth:'1991-01-08',addr:'广州市天河区东圃镇XXX街道11号B区3栋411房'}
      ],
      dropColumnName:'选择筛选的状态',
      dialogVisible:false,//编辑状态的弹窗
      searchType:'',//筛选的状态
      searchTypeOptions:[
        {value:'全部'},
        {value:'1'},
        {value:'2'},
      ],

      dialogImageUrl: '',//商品图片
      imgPrevState: false,//商品图片的弹窗状态
      member:{
        name:'',
        level:'',
        state:'',//缴费状态
        deadline:'',//缴费时间
        mustMoney:'',//应缴金额
        hasMoney:'',//已交金额
        payType:''
      },//弹窗的信息
      publicTime:'',
      tableData: [{name:'1111',sex:'man'}]
		}
  },
  methods: {
    //获取商品列表
    handleRemove(file, fileList) {
        console.log(file, fileList);
      },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.imgPrevState = true;
    },
    editor(){
      //对缴费用户进行编辑
      this.dialogVisible = true
    },
    handleClose(){
      //编辑弹窗关闭前的回调

    },
    editActivedEvent ({ row, column }, event) {
      // console.log(`打开 ${column.title} 列编辑`)
    },
    editClosedEvent ({ row, column }, event) {
      // console.log(`关闭 ${column.title} 列编辑`)
      console.log(this.tableData,666)
    },
    addTable(){
      //添加表单
      this.tableData.push({name:'',sex:''})
    },
    onEditorReady(editor){}, // 准备编辑器
		onEditorBlur(){}, // 失去焦点事件
		onEditorFocus(){}, // 获得焦点事件
		onEditorChange(){}, // 内容改变事件
  },
}
</script>
<style lang='scss' scoped>
  .goods{
    .task-form-text{
				color: #666666;
			}
    .action-bar{
			background-color: #f2f2f2;
			height: 60px;
      margin: 10px 0px;
      box-sizing: border-box;
			display: flex;
			align-items: center;
			padding-left: 20px;
			.action-bar-input{
				width: 250px;
				margin-right: 14px;
			}
			.activity-text{
				color: #666666;
			}
		}
		.el-table-style{
			width: 100%;
			border: 1px solid #f2f2f2;
		}
		.footer-bar{
			display: flex;
			justify-content: space-between;
			align-items: center;
      background: #f2f2f2;
      padding: 8px;
      margin: 10px 0px;
      box-sizing: border-box;
		}
		.dialog-footer{
			text-align: center;
		}
    .add-table-wrapper{
      display: flex;
      justify-content: center;
      margin:20px 0; 
    }
  }
</style>

<style>
  .el-pagination.is-background .el-pager li,
	.el-pagination.is-background .btn-prev,
	.el-pagination.is-background .btn-next
	{
		background-color: #fff;
		border: 1px solid #f1f1f1;
		margin: 0;
	}

  .goods .el-dialog__body{overflow: auto}
  .goods .vxe-body--column{
    vertical-align: middle;
  }
  .ql-editor{
    min-height:400px;
  }
</style>
